<!DOCTYPE html>
<html xmlns:el-col="http://www.w3.org/1999/html" lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="/js/jquery-3.1.1.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="/js/vue.min.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

		<style>
		.login-one{
			background-image:url(/image/login5.jpg);
			background-size: cover;
			background-repeat:no-repeat;
			overflow:hidden;
			height: 100%;
		}
		</style>
		<style>
			.custom-label-size {
				font-size: 18px;
			}
		</style>
	</head>
	<body class="login-one">
		<div id="app">
			<!-- 用户登录 -->
				<el-form  class="demo-ruleForm" label-width="80px" style="background-color: rgba(255, 255, 255, 0.7); color: #000;width: 500px;position: fixed;left:35%;top:30%;border-radius: 10px;">
					 <h1 align="center">职员管理系统</h1>

						<el-form-item label="用户名" prop="userName">
							<el-col :span="22">
								<el-input v-model="employee.employeeName"></el-input>
							</el-col>
						</el-form-item>

					<el-form-item label="密码" prop="userPwd">
						<el-col :span="22">
							<el-input  v-model="employee.employeePassword" show-password></el-input>
						</el-col>
					</el-form-item>

					<el-form-item >
						<div class="button-container">
							<el-button style="background-color: seagreen" icon="el-icon-user-solid" type="success" size="medium" @click="login">登录</el-button>
							<el-button style="background-color: seagreen" icon="el-icon-delete" type="success" size="medium">重置</el-button>
						</div>
					</el-form-item>

				</el-form>
		</div>
	</body>
	
	<script>
			new Vue({
				el: "#app",
				data: {
					employee: {
						employeeName: "",
						employeePassword: "",
					}
				},
				methods:{
					login() {//登录
						const self = this; // 保存当前Vue实例的引用
						$.ajax({
							url: "employee/login",
							type: "post",//提交方式
							data: JSON.stringify(this.employee),//参数
							contentType: "application/json",//请求体内容类型，提交参数格式是JSON提交
							success:function (rs) {
								if (rs.code === 200) {
									// 只有在登录成功后，才设置 sessionStorage
									const { role, src } = rs.data;
									sessionStorage.setItem("role", role);
									sessionStorage.setItem("src",src);
									sessionStorage.setItem("name", self.employee.employeeName);
									//跳转index
									window.location.href = "/index";
								} else {
									//提示
									self.$alert(rs.msg);
								}
							}
						});
					}
				}
			})
	</script>
</html>
